<template>
  <v-content >
    <div class="mw-column-style" style="background-color: #ffffff;margin-bottom:0.79rem;padding:.2rem .15rem 0 .3rem;" v-vuet-scroll="{ path: 'addresslist', name: 'content' }">
      <div style="text-align:right;"><button class="btn_default">跳过</button></div>
      <div>
        <h4 class="fz-20">选择你的小众领域</h4>
        <p class="m-t-10">为您推荐更适合的你的领域</p>
      </div>
      <div class="clssify_box m-t-20" v-for="(classify,i) in categories" :key="i">
        <div class="hd">
          <span>{{classify.name}}（{{classify.children.length}}）</span>    
          <span style="float:right;" v-show="classify.status" @click="changePanel(i)"><img src="../../assets/switch0.png" width="20" alt=""></span>
          <span style="float:right;" v-show="!classify.status" @click="changePanel(i)"><img src="../../assets/switch1.png" alt=""></span>
        </div>
        <div class="clssify_list" v-show="classify.status">
           <div class="btn_info m-t-15" :class="{active:choosedValue.indexOf(item.id)!=-1}"
            v-for="(item,index) in classify.children" :key="index"
            @click="chooseClassify(index,item.id)">
            {{item.name}}</div>
            <div class="other"></div>
            <div class="other"></div>
            <div class="other"></div>
        </div>
      </div>
      <button class="btn_sure m-t-20" @click="sureCommit">选好了~</button>
    </div>
  </v-content>
</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      // mapModules({data: 'addresslist'}),
      // mapRules({store: [{ path: 'addresslist' }],need: [{ path: 'addresslist' }]}),
    ],
    components: {

    },
    data() {
      return {
        isActive:false,
        showPanel:true,
        choosedValue:[],
        categories:[]
      }
    },
    methods: {
      skipToAdd() {
        this.$router.push({ name: 'newaddress'})
      },
      getCategory(){
        var that = this;
        httputil.request("category/tree", {}, function (successresult) {
            that.categories = successresult.categories;
            that.categories.map(i=>{
              that.$set(i,'status',true)
            })
          }, function (errorresult) {
            if (type == "down") {
              done();
            }
          }, "GET", false, "")
      },
      chooseClassify(i,value){
        let arrIndex = this.choosedValue.indexOf(value);
        if(arrIndex>-1){
            this.choosedValue.splice(arrIndex,1);
        }else{
            this.choosedValue.push(value);
        }
      },
      changePanel(i){
        this.categories[i].status = !this.categories[i].status;
      },
      sureCommit(){
        if(this.choosedValue.length){
          console.log(this.choosedValue)
          alert(this.choosedValue)
        }else{
          alert('请选择兴趣标签')
        }
      }
    },

    created() {
      
    },

    mounted() {
      this.getCategory();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../../assets/styles/base.less';
.zxlybtn2 {
  color: green;
}
.btn_default {
  width: 0.5rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
}
.btn_info {
  /* flex: 1 0 25%; */
  outline: 0;
  color: #333;
  width: 0.66rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  margin: 0.15rem 0.01rem 0 0.01rem;
  background-color: #f2f2f2;
  border: 0;
  border-radius: 0.3rem;
}
.btn_info.active {
  background-color: #ffd012;
}
.other {
  width: 0.66rem;
  height: 0;
  visibility: hidden;
}
.clssify_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.btn_sure {
  outline: 0;
  color: #333;
  width: 1.4rem;
  text-align: center;
  height: 0.34rem;
  line-height: 0.34rem;
  background-color: #ffd012;
  border: 0;
  border-radius: 0.34rem;
}
/* .clssify_list div{
flex: 1 0 25%;
} */
</style>
